<template>
 <div>
  <div class="footer_wrap">
    <router-link to="/find" exact>登录</router-link>
    <router-link to="/my">注册</router-link>
    <router-link to="/part">文章</router-link> 
    <router-link to="/tel">列表</router-link> 
  </div>
  <div class="top">
   <router-view></router-view>
  </div>
 </div>
</template>

<script>
export default {}
</script>

<style scoped>
.footer_wrap {
 position: fixed;
 left: 0;
 top: 0;
 display: flex;
 width: 100%;
 text-align: center;
 background-color: #333;
 color: #ccc;
}
.footer_wrap a {
 flex: 1;
 text-decoration: none;
 padding: 20px 0;
 line-height: 20px;
 background-color: #333;
 color: #ccc;
 border: 1px solid black;
}
.footer_wrap a:hover {
 background-color: #555;
}
.top {
 padding-top: 62px;
}
.router-link-exact-active,
.router-link-active {
  color: red !important;
}
</style>
